<template>
	<scroll-view :enable-flex="true" :show-scrollbar="false" @scrolltolower="lower" :scroll-y="true" style="height: 100vh; padding-bottom: 30rpx;">
		<!-- 搜索栏 -->
		<!-- 		<view
			style="width: 702rpx;height: 50rpx;border-radius: 25rpx;background-color: #F5F5F5; display: flex;align-items: center;"
		>
			<image
				mode="aspectFill"
				src="../../static/home/search.png"
				style="width: 34rpx;height: 34rpx;margin-left: 49rpx;"
			></image>
			<view
				style="width: 1px;height: 32rpx;background-color: #E0E0E0;margin-left: 28rpx;"
			></view>
			<input
				placeholder="搜索科目/教练"
				placeholder-class="inputclass"
				confirm-type="search"
				style="margin-left: 31rpx;font-size: 24rpx;"
			/>
		</view> -->

		<!-- banner -->
		<swiper style="width: 100%;height: 300rpx;margin-top: 20rpx;" circular="true" autoplay="true" interval="2000">
			<swiper-item v-for="(item, index) in bannerList" :key="index"><image mode="aspectFill" :src="item.image" style="width: 100%; height: 300rpx;"></image></swiper-item>
		</swiper>

		<!-- 金刚区 -->
		<!-- <button type="default" @click="ddd">ddddddddd</button> -->
		<view style="display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 20rpx;">
			<view class="jingangqu" v-for="(item, index) in jingangqu" :key="index" @click="gocheliangxiangqingPage(item, item.path)">
				<image mode="aspectFill" :src="item.image" style="width: 90rpx;height: 90rpx;"></image>
				<!-- <view>{{DDD(item.name) }}</view> -->
				<view>{{ item.name }}</view>
				<!-- <view>{{item.name.slice(0,1)}}</view> -->
			</view>
		</view>
		<!-- 消息通知 -->
		<view class="horn">
			<view class="horn_con">
				<!-- <text class="cuIcon-notification" style="color: #58C5FF;"></text> -->
				<!-- <text>邀请好友注册成功，赠送10元洗车抵扣券!</text> -->
			</view>
		</view>
		<!-- 精选好车 -->
		<view class="select_car" :style="{ width: width + 'px' }">
			<text class="car_head">精选好车</text>
			<view class="select_car_con">
				<view class="car_box" v-for="(item, index) in selectcars" :key="index">
					<view @click="GO(item.id)">
						<image :src="item.image" mode="aspectFill" class="r" style="width: 340rpx; height: 224rpx;"></image>
						<text class="car_txt" style="margin-bottom: 0; ">{{ item.title }}</text>

						<text class="car_price t-price">{{ item.price }}元</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 广告区域 -->
		<view class="advertising">
			<view class="advertising_con" @click="GOto('service')">
				<image src="../../static/home/advertising.png" mode=""></image>
				<text>前往使用{{ youhuimoney }}元洗车抵扣券</text>
				<view class="advertising_btn">立即使用</view>
			</view>
		</view>
		<!-- 超值服务 -->
		<view class="service" :style="{ width: width + 'px' }">
			<text class="car_head service_head">超值服务</text>
			<view class="service_con">
				<view class="service_box">
					<view class="service_ _a" v-for="(item, index) in bargains" :key="index">
						<view @click="GO(item.id)" style="position: relative;">
							<image :src="item.image" mode="" style="width:224rpx; height:160rpx;"></image>
							<text style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 分割线 -->
		<view style="width: 702rpx; height: 10rpx; background-color: #F2F5FA;"><text style="display: inline-block; translate: -999rpx; display: block;"></text></view>
		<!-- 文章列表 -->
		<text style="display: flex; align-items: center; height: 116rpx; line-height: 1; font-size: 32rpx; margin-top: 40rpx; padding: 0 24rpx; ">精选文章</text>
		<view style="display: flex;justify-content: space-between;width: 702rpx; margin: 45rpx auto 0;" v-for="(item, index) in textList" :key="index" @click="jumpArticle(item)">
			<!-- 左边文字 -->
			<view style="display: flex;flex-direction: column;justify-content: space-between;">
				<view style="font-size: 24rpx;color: #333333;">《{{ item.title }}》</view>
				<view style="font-size: 18rpx;color: #666666;">{{ item.updatetime }}</view>
			</view>
			<!-- 右边配图 -->
			<image mode="aspectFill" :src="item.img" style="width: 228rpx;height: 122rpx;"></image>
		</view>
	</scroll-view>
</template>

<script>
import helper from '../../common/helper.js';
export default {
	data() {
		return {
			youhuimoney: '',
			width: 0,
			// selectCar:'',
			selectcars: {},
			bargains: {},
			id: '',
			// test:'',
			// [{
			//  "xinghaoName": "2019款入门级",
			//  "yanseList": {
			//   "id": 12,
			//   "yanseName": "红色",
			//   "shuliang": 5
			//  }
			// }, {
			//  "xinghaoName": "2019款标准级",
			//  "yanseList": {
			//   "id": 13,
			//   "yanseName": "红色",
			//   "shuliang": 5
			//  }, {
			//   "id": 14,
			//   "yanseName": "白色",
			//   "shuliang": 5
			//  }, {
			//   "id": 15,
			//   "yanseName": "黑色",
			//   "shuliang": 5
			//  }
			// }, {
			//  "xinghaoName": "2019款豪华级",
			//  "yanseList": {
			//   "id": 16,
			//   "yanseName": "宝蓝色",
			//   "shuliang": 5
			//  }, {
			//   "id": 17,
			//   "yanseName": "黄色",
			//   "shuliang": 5
			//  }
			// }]
			//banner图数组
			bannerList: [
				/**
				 * image	banner图片地址
				 * path	跳转地址
				 */
			],
			jingangqu: [
				/**
				 * image	菜单icon
				 * name	菜单名称
				 * path	跳转地址
				 */
			],
			textList: [
				/**
				 * updatetime	更新时间
				 * img	封面图
				 * title	标题
				 * id	键
				 */
			],
			page: 1,
		};
	},
	created() {
		let _this = this;
		uni.getSystemInfo({
			success(e) {
				_this.width = e.windowWidth;
				console.log('e: ', e);
			},
		});
		
	},
	onLoad(e) {
		this.getInfoData();
		this.getArtcl(this.page, 0);
		// this.selectcar();
		if (uni.getStorageSync('share_id')) {
			this.bind()
		}
		
	},
	methods: {
		async bind() {
			
			console.log('绑定进入 :>> ', 77777777777777);
			//绑定关系
			let bindApiRes;
			try {
				// addons/shopro/share/add
				bindApiRes = await this.$request.post('addons/shopro/share/add', {
					data: {
						share_id: uni.getStorageSync('share_id'),
					},
				});
				console.log('绑定返回参数 :>> ', bindApiRes);
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
		
			console.log('bindApiRes', bindApiRes);
		},
		GO(id) {
			this.$Router.push({
				name: 'fuwuxiangqing',
				params: {
					id: id,
					type: 2,
				},
			});
		
		},
		
		GOto(type) {
			this.$Router.pushTab({
				name: type,
			});
		},
		jumpArticle(item) {
			console.log('99999999999 :>> ', item);
			this.$Router.push({
				name: 'wenzhangx',
				params: {
					id: item.id,
				},
			});
		},
		lower: function(e) {
			this.page += 1;
			this.getArtcl(this.page, 1);
		},
		gocheliangxiangqingPage(item, path) {
			console.log('item,',item)
			if(path === '/pages/staff/setInfo') {
				uni.navigateTo({
					url: '/pages/staff/setInfo'
				})
				return
			}
			
			if(path === '/pages/staff/wash') {
				uni.navigateTo({
					url: '/pages/staff/wash'
				})
				return
			}
			var id = path.slice(path.indexOf('=') + 1);
			this.id = id;
			uni.setStorageSync('carid', id);
			uni.setStorageSync('cat_id', item.cat_id)
			uni.setStorageSync('titleName', item.name)
			if (item.pid == 1) {
				this.$Router.pushTab({
					name: 'lookCar',
					params: {
						// id: id
						// wx.tabbar不能携带参数，选择存本地
						
					},
				});

			} else {
				this.$Router.push({
					name: 'fuwuxiangqing',
					params: {
						id: this.id,
						type: 2,
					},
				});
			}
		},
		//获取banner，菜单
		async getInfoData() {
			let res;
			try {
				res = await this.$request.post('addons/shopro/index/template', {
					header: {
						platform: 'wxMiniProgram',
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			// console.log('res ===========首页菜单数据:>> ', res);
			// 提取优惠劵显示
			this.youhuimoney = res.data.data.home[6].content.name;
			//提取banner
			var bannerList = res.data.data.home[1].content.list;
			// console.log('res:首页baner==================== ', res.data.data.home[5].content.ids);
			// 提取精选好车
			let homel = res.data.data.home;
			// console.log('home1 :>> ===========获取首页菜单', home1);
			var str = '';
			homel.forEach((item, index) => {
				// console.log('item: ', item);
				if (index === 5 || index === 8) {
					str = item.content.ids;
					console.log('str: ', str);
					this.selectcar(index, str);
				}
			});
			// 循环处理图片url
			var arr = [];
			bannerList.forEach((item, index) => {
				if (item.image.startsWith('http')) {
					arr.push(item);
				} else {
					item.image = helper.aliUrl + item.image;
					arr.push(item);
				}
			});
			this.bannerList = arr;

			//提取金刚区菜单
			var jingangqu = res.data.data.home[2].content.list.slice(0, 8);
			var arr1 = [];
			jingangqu.forEach(i => {
				if (i.image.startsWith('http')) {
					arr1.push(i);
				} else {
					i.image = helper.aliUrl + i.image;
					arr1.push(i);
				}
			});
			this.jingangqu = arr1;
		},
		//获取精选分类数据
		async selectcar(index, str) {
			let res;
			try {
				res = await this.$request.get('addons/shopro/goods/lists', {
					data: {
						ids: str,
					},
				});
				if (index === 5) {
					this.selectcars = res.data.data.data;
				} else if (index === 8) {
					this.bargains = res.data.data.data;
				}
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
		},
		//获取文章
		async getArtcl(page, style) {
			if (style == 0) this.page = 1;
			let res;
			try {
				res = await this.$request.post('addons/shopro/index/artcl', {
					data: {
						page: page,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			// 有些图片url没有前缀,需要在这里加上
			for (let i = 0; i < res.data.data.data.length; i++) {
				res.data.data.data[i].img = helper.aliUrl + res.data.data.data[i].img;
			}
			// 把新数据追加到当前数组列为1,初始化数据为0
			if (style == 0) {
				this.textList = res.data.data.data;
			} else {
				if (res.data.data.data != '') {
					this.textList = this.textList.concat(res.data.data.data);
				}
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.inputclass {
	font-size: 24rpx;
	color: #d6d6d6;
}

.jingangqu {
	flex-basis: 25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	color: #333333;
	margin-top: 19rpx;

	:last-child {
		margin-top: 19rpx;
	}
}
.horn {
	display: flex;
	justify-content: center;
}
.horn_con {
	height: 60rpx;
	display: flex;
	align-items: center;
	width: 702rpx;
	// background: #f2f5fa;
	// margin: 49rpx 0 41rpx;
	text:nth-of-type(1) {
		color: #58c5ff;
		padding: 0 16rpx;
	}
	text:nth-of-type(2) {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
	}
}
// 车辆精选，超值服务抬头
.car_head {
	display: block;
	font-weight: 500;
	font-size: 31rpx;
	color: #333;
	margin-bottom: 33rpx;
}
// 车辆精选
.select_car {
	display: flex;
	flex-direction: column;
	padding: 0 24rpx;
	// width: 100%;
	.select_car_con {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		.car_box {
			width: 50%;
			margin-bottom: 39rpx;
			text:nth-of-type(1) {
				width: 100%;
				height: 67rpx;
				line-height: 1.2;
				display: -webkit-box;
				color: #333232;
				text-overflow: ellipsis;
				margin: 23rpx 0 22rpx;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			text:nth-of-type(2) {
				width: 100%;
				line-height: 22rpx;
				color: #ff7300;
				color: #ff7300;
			}
		}
	}
}
.advertising {
	margin: 11rpx auto 10rpx;
	display: flex;
	margin: 11rpx auto 10rpx;
	justify-content: center;
	.advertising_con {
		position: relative;
		width: 706rpx;
		height: 160rpx;
		image {
			width: 100%;
			height: 100%;
		}
		text:nth-of-type(1) {
			position: absolute;
			left: 255rpx;
			top: 35rpx;
			font-size: 32rpx;
			color: #fffefe;
		}
		view:nth-of-type(1) {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 470rpx;
			bottom: 18rpx;
			height: 50rpx;
			width: 150rpx;
			background: #ffd800;
			color: #fb0857;
			border-radius: 25rpx;
		}
	}
}
// 超值服务
.service {
	padding: 0 24rpx;
	margin-top: 50rpx;
	.service_con {
		width: 100%;
		.service_box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.service_ {
				display: flex;
				position: relative;
				align-items: center;
				justify-content: center;
				margin-bottom: 40rpx;
				text {
					position: absolute;
				}
			}
		}
	}
}
</style>
